use js_sys::wasm_bindgen::JsCast;
use sycamore::prelude::*;
use web_sys::HtmlVideoElement;
use webcam_live::VideoStream;

fn main() {
    console_error_panic_hook::set_once();
    tracing_wasm::set_as_global_default();

    sycamore::render(App);

    // sycamore::render(|| {
    //     view! {
    //         h1 (id="hello-world") { "Hello, world!" }
    //         p { "This is my first Sycamore app" }
    //     }
    // });

    // sycamore::render(|| "Hello, world!".into());

    // println!("Hello, world!");
}

#[component]
fn App() -> View {
    let video_ref = create_node_ref();
    let el = video_ref.get().unchecked_into::<HtmlVideoElement>();
    let video_stream = VideoStream::new(el);
    view! {
        div(class="container p-2") {
            div(class="row"){

                video(class="border border-gray-400 rounded-lg"
                    , r#ref = video_ref
                    , autoplay=true
                    , width="1200"
                    ,controls=true
                    ,playsinline=true
                    // ,muted=true
                    ,height="720"
                    ,src="https://vjs.zencdn.net/v/oceans.mp4"
                    , on:error = |e| {
                        log::error!("加载视频错误：{:?}", e);
                    }
                )

                // div(class="col-12"){
                //     h1(class="text-center hero-text text-blue font-bold"){
                //         h1 { "Hello, world!" }
                //         p { "This is my first Sycamore app" }
                //     }
                // }
            }
        }
    }
}

// #[derive(Props)]
// struct WrapperProps {
//     children: Children,
// }

// #[component]
// fn Wrapper(props: WrapperProps) -> View {
//     view! {
//         div {
//             (props.Children)
//         }
//     }
// }
